<template>
	<wd-popup v-model="isShowPicker" custom-style="height: 300px;" position="bottom" @click-modal="clickModal">
		<view class="picker-toobar">
			<view class="picker-action picker-action-cancel" @click="handleCancel">取消</view>
			<view class="picker-action" @click="handlePicker">确认</view>
		</view>
		<wd-picker-view v-model="selectVal" :columns="columns" :value-key="valueKey || 'value'" :label-key="labelKey || 'label'" :label="label || ''" :label-width="labelWidth" />
	</wd-popup>
</template>

<script setup>
	import { ref, watch } from 'vue'

	const isShowPicker = ref(false)
	const selectVal = ref('')

	const emits = defineEmits(['handlePicker', 'handleCancel'])
	const props = defineProps({
		isShow: {
			type: Boolean,
			required: true
		},
		columns: {
			type: Array,
			required: true
		},
		valueKey: String,
		labelKey: String,
		label: String,
		labelWidth: String
	})

	watch(() => props.isShow, (val) => { 
		isShowPicker.value = val
		selectVal.value = props.valueKey ? props.columns[0][`${props.valueKey}`] : props.columns[0].value
	})
	
	function clickModal() {
		emits('handleCancel')
	}

	function handlePicker() {
		emits('handlePicker', selectVal.value)
	}

	function handleCancel() {
		// isShowPicker.value = false
		emits('handleCancel')
	}
</script>

<style scoped lang="scss">
	.picker-show {
		:deep(.wd-cell__left) {
			min-width: 33%;
			max-width: 33%;
		}

		:deep(.wd-cell__value) {
			text-align: left;
		}
	}

	.picker-toobar {
		position: relative;
		display: flex;
		font-size: var(--wot-picker-toolbar-fs, var(--wot-fs-title, 16px));
		height: var(--wot-picker-toolbar-height, 54px);
		line-height: var(--wot-picker-action-height, 16px);
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;

		.picker-action-cancel {
			color: #666 !important;
		}

		.picker-action {
			display: block;
			border: none;
			outline: none;
			font-size: var(--wot-picker-toolbar-fs, var(--wot-fs-title, 16px));
			color: var(--wot-picker-toolbar-finish-color, var(--wot-color-theme, #4d80f0));
			background: transparent;
			padding: 24px 15px 14px;
		}
	}
</style>